<template>
    <div style="padding: 8px;">
        <el-tabs type="card" v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="奖金计算列表" name="0"></el-tab-pane>
            <el-tab-pane label="汇总奖金列表" name="1"></el-tab-pane>
        </el-tabs>
        <el-card>
            <el-form :inline="true" :model="formInline" class="demo-form-inline">
                <el-form-item :label="$t('创建时间')">
                    <el-date-picker value-format="yyyy-MM-dd" v-model="formInline.createTime" size="small" type="datetime"
                        :placeholder="$t('选择日期时间')"></el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button size="small" type="primary" @click="onSubmit">{{ $t('query') }}</el-button>
                    <el-button size="small" type="warning" @click="reset">{{ $t('重置') }}</el-button>
                    <el-button type="info" @click="handleExport">{{ '导出参考数据' }}</el-button>
                </el-form-item>
            </el-form>
        </el-card>
        <el-card v-loading="loading" style="margin-top: 8px;">
            <el-button @click="grant" style="margin-bottom: 8px;" size="small" v-if="activeName == 1"
                type="primary">奖金发放</el-button>
            <el-table :data="tableData" style="width: 100%">
                <el-table-column v-if="activeName == 0" prop="userId" label="奖励用户">
                </el-table-column>
                <el-table-column v-if="activeName == 0" prop="packageType" label="是否平级奖">
                </el-table-column>
                <el-table-column v-if="activeName == 0" prop="rateId" label="级差比例">
                </el-table-column>
                <el-table-column v-if="activeName == 0" prop="dayFlowUnlock" label="总解锁量">
                </el-table-column>
                <el-table-column v-if="activeName == 0" prop="incomeAmount" label="奖金">
                </el-table-column>
                <el-table-column v-if="activeName == 0" prop="channeName" label="所属">
                </el-table-column>
                <el-table-column v-if="activeName == 0" prop="levelTree" label="等级树">
                </el-table-column>
                <el-table-column v-if="activeName == 0" prop="createName" label="计算用户">
                </el-table-column>
                <el-table-column v-if="activeName == 1" prop="incomeAmount" label="发放奖金">
                </el-table-column>
                <el-table-column width="100" v-if="activeName == 1" prop="userId" label="用户">
                </el-table-column>
            </el-table>
            <el-pagination style="float: right;margin: 5px 0;" :page-size="page.pageSize" @size-change="handleSizeChange"
                @current-change="handleCurrentChange" layout="total, prev, pager, next" :total="total">
            </el-pagination>
        </el-card>
    </div>
</template>

<script>
import { getteamRewardListApi, getAppuserRcordsListApi, getdistributeRewardsApi } from '@/api/appuser/teamReward'
export default {
    data() {
        return {
            activeName: 0,
            loading: false,
            tableData: [],
            formInline: {
                createTime: null,
            },
            total: 0,
            page: {
                pageNum: 1,
                pageSize: 20,
            }
        }
    },
    created() {
        this.getDate()
        this.getList()
    },
    methods: {
        getDate() {
            // 获取当前日期
            let now = new Date();

            // 格式化为yyyy-MM-dd
            let year = now.getFullYear();
            let month = String(now.getMonth() + 1).padStart(2, '0');
            let day = String(now.getDate()).padStart(2, '0');
            let currentDate = `${year}-${month}-${day}`;
            // 给formInline.createTime赋值
            this.formInline.createTime = currentDate;
            console.log(this.formInline.createTime);
        },
        handleClick(tab) {
            this.page = {
                pageNum: 1,
                pageSize: 20,
            }
            console.log(tab.name);
            this.getList()
        },
        onSubmit() {
            this.page = {
                pageNum: 1,
                pageSize: 20,
            }
            this.getList()
        },
        async getList() {
            this.loading = true
            let res
            if (this.activeName == 0) {
                res = await getteamRewardListApi({
                    ...this.page,
                    ...this.formInline
                })
            } else {
                res = await getAppuserRcordsListApi({
                    ...this.page,
                    ...this.formInline
                })
            }
            console.log(res);
            this.tableData = res.rows
            this.total = res.total
            this.loading = false
        },
        reset() {
            this.page = {
                pageNum: 1,
                pageSize: 20,
            }
            this.getDate()
            this.getList()
        },
        handleSizeChange(val) {
            this.page.pageSize = val;
            this.getList();
        },
        handleCurrentChange(val) {
            this.page.pageNum = val;
            this.getList();
        },
        async grant() {
            this.$confirm('确认奖金发放', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                await getdistributeRewardsApi()
                this.$message({
                    type: 'success',
                    message: '发放成功!'
                });
            }).catch(() => {
                // this.$message({
                //     type: 'info',
                //     message: '已取消'
                // });
            });
        },
        formatDate(date) {
            var year = date.getFullYear();
            var month = String(date.getMonth() + 1).padStart(2, '0');
            var day = String(date.getDate()).padStart(2, '0');
            return year + '-' + month + '-' + day;
        },
        /** 导出按钮操作 */
        handleExport() {
            const time = this.formatDate(new Date())
            this.download(
                "appuser/teamReward/export",
                {},
                `${time}_团队奖励参考数据.xlsx`
            );
        },
    }
}
</script>

<style>
.el-tabs__nav-scroll {
    width: 100%;
}
</style>